<template>
  <div id="body">
    <div id="search">
      <a-space>
        <a-input-search
          v-model:value="ArticleTitle"
          placeholder="根据文章标题搜索"
          style="width: 300px"
        />
        <a-input-search
          v-model:value="UserName"
          placeholder="根据用户名称搜索"
          style="width: 300px"
        />
        <a-button type="primary" @click="onSearch()">搜索</a-button>
      </a-space>
    </div>
    <div>
      <a-table :columns="columns" :data-source="data">
        <template #type="{ text: type }">
          <span>
            <a-tag v-if="type == true" :color="'green'"> 已发布 </a-tag>
            <a-tag v-else :color="'geekblue'"> 未发布 </a-tag>
          </span>
        </template>
        <template #action="{ text }">
          <span>
            <a href="http://localhost:8080/contentPage" target="NewView">
              浏览全文
            </a>
            <a-divider type="vertical" />
            <a>查看作者</a>
            <a-divider type="vertical" />
            <a @click="deleleArticles(text.key)">删除文章</a>
          </span>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
// import { DownOutlined } from "@ant-design/icons-vue";
import { findArticle, deleleArticle } from "../../api/administer";
import { message } from "ant-design-vue";
import { useRoute } from "vue-router";

const columns = [
  { title: "文章标题", dataIndex: "title", key: "title" },
  { title: "作者", dataIndex: "author", key: "author" },
  {
    title: "文章状态",
    dataIndex: "type",
    key: "type",
    slots: {
      customRender: "type",
    },
  },
  { title: "浏览量", key: "viewNum", dataIndex: "viewNum" },
  { title: "收藏量", key: "collectionNum", dataIndex: "collectionNum" },
  { title: "评论量", key: "commentNum", dataIndex: "commentNum" },
  { title: "管理", key: "action", slots: { customRender: "action" } },
];

export default defineComponent({
  setup() {
    const route = useRoute();
    const ArticleTitle = ref("");
    const UserName = ref("");
    const data = ref([]);

    const deleleArticles = (key) => {
      //   console.log(key);
      deleleArticle({
        url: "/admin/deleleArticle",
        aid: key,
        success: (res) => {
          //   console.log(res.data);
          message.info(res.data);
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    if (route.query.name) {
      UserName.value = route.query.name;
      //   console.log(UserName.value);
      findArticle({
        url: "/admin/findArticle",
        username: UserName.value,
        articletitle: ArticleTitle.value,
        success: (res) => {
          //   console.log(res.data);
          data.value = res.data;
        },
        err: (err) => {
          console.log(err);
        },
      });
    }

    const onSearch = () => {
      //   console.log(ArticleTitle.value, UserName.value);
      findArticle({
        url: "/admin/findArticle",
        username: UserName.value,
        articletitle: ArticleTitle.value,
        success: (res) => {
          //   console.log(res.data);
          data.value = res.data;
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    return {
      ArticleTitle,
      UserName,
      onSearch,
      data,
      columns,
      deleleArticles,
    };
  },

  components: {},
});
</script>

<style socped>
#body {
  margin-left: 20px;
  /* background: chartreuse; */
}
#search {
  text-align: center;
  margin: 20px 0 40px 0;
}
</style>